<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$suppliers_info.brand_name}吧</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
		<style>
			#ddd span{position: relative;}
			.mui-table-view-chevron .mui-table-view-cell{padding-right: 0 !important;}
			.fatie{z-index: 10;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title fs_xl">{$suppliers_info.brand_name}讨论区</h1>
		</header>
		<include file="public/bottom_nav" />
		<div id="pullrefresh" class="mui-content hese fs_xl mui-scroll-wrapper" style="height: 100%;overflow: auto;position: relative;">
			<div class="mui-scroll">
				<div class="tb_img">
					<img src="{$suppliers_info.suppliers_thumb}" />
				</div>
				<div class="tb_info cls">
					<div class="tb_info_lt">
						<img src="{$suppliers_info.suppliers_logo}" />
					</div>
					<div class="tb_info_rt cls">
						<div class="tb_jc">
							<p class="fs_l"><span>{$suppliers_info.suppliers_name}</span>|<span>{$suppliers_info.title}</span></p>
							<p class="fs_s">{$suppliers_info.suppliers_aroma} | {$suppliers_info.suppliers_type} | {$suppliers_info.suppliers_material}</p>
						</div>
						<div class="tb_gz">
							<p class="fs_m"><span id="attention"><if condition="$attention eq 0">关注<else />已关注</if></span></p>
							<p class="fs_xs">{$suppliers_info.attention}人已关注</p>
						</div>
					</div>
				</div>
				<div class="tb_list">
					<div class="tb_xt">
						<ul>
							<li>
								<div class="xt_top">
									<span><img src="{$systemDiscuss.logo_img}" /></span>
									<span class="red_pl fs_m">封坛天下</span>
									<span class="fs_s"><em class="fs_s">平台</em><i class="fs_xs">{$systemDiscuss.addtime|date="Y-m-d",###}</i></span>
								</div>
								<div class="xt_m">
									<a href="{:U('/mobile/discuss/discuss_info',array('id'=>$systemDiscuss.discuss_id))}">
										<p class="fs_m"><em class="fs_l">#{$systemDiscuss.title}#</em>{$systemDiscuss.content}</p>
									</a>
								</div>
							</li>
							<volist name="suppliersDiscuss" id="vo">
								<li>
									<div class="xt_top">
										<span><img src="{$vo.suppliers_logo}" /></span>
										<span class="org_pl fs_m">{$suppliers_info.suppliers_name}</span>
										<span class="fs_s"><em class="org_bk fs_s">酒厂</em><i class="fs_xs">{$vo.addtime|date="Y-m-d",###}</i></span>
									</div>
									<div class="xt_m">
										<a href="{:U('/mobile/discuss/discuss_info',array('id'=>$vo.discuss_id))}">
											<p class="fs_m"><em class="fs_l">#{$vo.title}#</em>{$vo.content}</p>
											<p class="fs_m cls">
												<volist name="vo.img"  id="voo">
													<span><img src="{$voo}" /></span>
												</volist>
											</p>
										</a>
									</div>
								</li>
							</volist>
						</ul>
					</div>
					<div class="tb_xt tb_xt1">
						<ul class="mui-table-view mui-table-view-chevron">
							<volist name="discuss" id="vo">
								<li class="mui-table-view-cell">
									<div class="xt_top">
										<span><img src="{$vo.head_pic}" /></span>
										<span class="fs_m">{$vo.nickname}</span>
										<span class="fs_s"><i class="fs_xs">{$vo.addtime}</i><a href="{:U('/mobile/discuss/discuss_info',array('id'=>$vo.discuss_id))}" class="mui-icon mui-icon-chat fs_xl"><i class="fs_xs">{$vo.reply}</i></a></span>
									</div>
									<div class="xt_m">
										<a href="{:U('/mobile/discuss/discuss_info',array('id'=>$vo.discuss_id))}">
											<p class="fs_m"><em class="fs_l">#{$vo.title}#</em>{$vo.content}</p>
											<p class="fs_m cls">
												<volist name="vo.img"  id="voo">
													<span><img src="{$voo}" /></span>
												</volist>
											</p>
										</a>
									</div>
								</li>
							</volist>
						</ul>
					</div>
				</div>
			</div>		
		</div>
		<a class="fatie"><img src="__STATIC__/images/fatie.png" /></a>
		<div class="pl_bj">
			<div class="pl_fb">
				<p class="cls">
					<span id="pl_reg" class="fs_m">取消</span>
					<span id="pl_fb" class="fs_m">发布</span>
				</p>
				<p class="fs_m">
					<input type="text" id="discusstitle" name="" placeholder="请输入帖子的标题" />
				</p>
			</div>
			<div contenteditable="true" class="Input_text fs_l"></div>
			<div class="pl_tp cls">
				<div class="xj mui-icon iconfont icon-xiangji fs_xxxi" onclick="$('#doc').click();"></div>
				<input hidden="hidden" type="file" name="file" id="doc" style="width:150px;" onchange="previewImg(this)" />
				<div class="Main2">
					<div class="Input_Box">
						<div class="Input_Foot">
							<a class="imgBtn mui-icon iconfont icon-xiaolian fs_xxxi" href="javascript:void(0);"></a>
						</div>
					</div>
					<div class="faceDiv">
						<section class="emoji_container"></section>
					</div>
				</div>
			</div>
			<div id="dd" style="height: 8em;">
				<div class="mui-scroll-wrapper" style="width: 100%;overflow-x: auto;overflow-y: hidden;">
					<div class="mui-scroll" id="ddd" style="white-space: nowrap;width: auto;">
					</div>
				</div>
			</div>
		</div>
		<script>
			var emojiconfig = {
				tieba: {
					name: "贴吧表情",
					path: "__STATIC__/images/arclist/",
					maxNum: 50,
					file: ".jpg",
					placeholder: ":{alias}:",
					alias: {
						1: "hehe",
						2: "haha",
						3: "tushe",
						4: "a",
						5: "ku",
						6: "lu",
						7: "kaixin",
						8: "han",
						9: "lei",
						10: "heixian",
						11: "bishi",
						12: "bugaoxing",
						13: "zhenbang",
						14: "qian",
						15: "yiwen",
						16: "yinxian",
						17: "tu",
						18: "yi",
						19: "weiqu",
						20: "huaxin",
						21: "hu",
						22: "xiaonian",
						23: "neng",
						24: "taikaixin",
						25: "huaji",
						26: "mianqiang",
						27: "kuanghan",
						28: "guai",
						29: "shuijiao",
						30: "jinku",
						31: "shengqi",
						32: "jinya",
						33: "pen",
						34: "aixin",
						35: "xinsui",
						36: "meigui",
						37: "liwu",
						38: "caihong",
						39: "xxyl",
						40: "taiyang",
						41: "qianbi",
						42: "dnegpao",
						43: "chabei",
						44: "dangao",
						45: "yinyue",
						46: "haha2",
						47: "shenli",
						48: "damuzhi",
						49: "ruo",
						50: "OK"
					},
					title: {
						1: "呵呵",
						2: "哈哈",
						3: "吐舌",
						4: "啊",
						5: "酷",
						6: "怒",
						7: "开心",
						8: "汗",
						9: "泪",
						10: "黑线",
						11: "鄙视",
						12: "不高兴",
						13: "真棒",
						14: "钱",
						15: "疑问",
						16: "阴脸",
						17: "吐",
						18: "咦",
						19: "委屈",
						20: "花心",
						21: "呼~",
						22: "笑脸",
						23: "冷",
						24: "太开心",
						25: "滑稽",
						26: "勉强",
						27: "狂汗",
						28: "乖",
						29: "睡觉",
						30: "惊哭",
						31: "生气",
						32: "惊讶",
						33: "喷",
						34: "爱心",
						35: "心碎",
						36: "玫瑰",
						37: "礼物",
						38: "彩虹",
						39: "星星月亮",
						40: "太阳",
						41: "钱币",
						42: "灯泡",
						43: "茶杯",
						44: "蛋糕",
						45: "音乐",
						46: "haha",
						47: "胜利",
						48: "大拇指",
						49: "弱",
						50: "OK"
					}
				},
				AcFun: {
					name: "AcFun表情",
					path: "__STATIC__/images/arclist/",
					maxNum: 54,
					file: ".jpg"
				}
			};
			$('.Main2').myEmoji();
		</script>
		<script type="text/javascript">
			$(function() {
				$(".fatie").click(function() {
					$(".pl_bj").show();
				});
				$("#pl_reg").click(function() {
					$(".pl_bj").hide();
				});
				$("#pl_fb").click(function() {
					var suppliers_id = {$suppliers_info.suppliers_id};
					var a_text = $(".Input_text").html();
					$("#ddd span").attr("class", $(this).index());
					var imgArr = [];
					var tnum = $("#ddd span");
					for(var n = 0; n < tnum.length; n++) {
						imgArr.push(tnum.eq(n).find("img").attr("src"));
					}
					var discusstitle = $("#discusstitle").val();
					if(discusstitle &&  a_text){
						$.ajax({
							type:"POST",
							url:"/Mobile/discuss/add_discuss",
							data:{"title":discusstitle,"content":a_text,"img":imgArr,"suppliers_id":suppliers_id},
							dataType:"json",
							async:false,//同步操作
							success:function(date){
								alert(date.msg);
								if(date.status == 1){
									history.go(0);
								}
							}
						});
					}else{
						alert("请输入内容和标题");
					}
				})
			})
//			window.onload = function() {
//				var input = document.getElementById("doc");
//				var result, div;
//				if(typeof FileReader === 'undefined') {
//					result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
//					input.setAttribute('disabled', 'disabled');
//				} else {
//					input.addEventListener('change', readFile, false);
//				}
//
//				function readFile() {              
//					for(var  i = 0; i < this.files.length; i++) {
//						if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　 //判断上传文件格式    
//							return alert("上传的图片格式不正确，请重新选择");　　　　　　　　　
//						}
//						var reader = new FileReader();
//						reader.readAsDataURL(this.files[i]);  
//						reader.onload = function(e) {
//							result = '<img src="' + this.result + '" alt=""/><i class="mui-icon mui-icon-close fs_xi" style="position:absolute;top:0em;right:0em;font-style:normal;color:#f5ba26;" onclick="$(this).parent().parent().remove();"></i>';
//							div = document.createElement('span');
//							div.innerHTML = result;
//							document.getElementById('ddd').appendChild(div);　　 //插入dom树                      <br>　　
//						}
//					}
//				}
//			}
			//上传图片预览
			function previewImg(input) {
				if(input.files && input.files[0]) {
					var reader = new FileReader(),
						img = new Image();
					reader.onload = function(e) {
						if(input.files[0].size > 307200) { //图片大于300kb则压缩
							img.src = e.target.result;
							img.onload = function() {
//								$(obj).attr('src', compress(img));
								var result = '<img src="' + compress(img)+ '" alt=""/><i class="mui-icon mui-icon-close fs_xi" style="position:absolute;top:0em;right:0em;font-style:normal;color:#f5ba26;" onclick="$(this).parent().remove();"></i>';
								div = document.createElement('span');
								div.innerHTML = result;
								document.getElementById("ddd").appendChild(div);
							}
						} else {
//							$(obj).attr('src', e.target.result);
							var result = '<img src="'+e.target.result+'" alt=""/><i class="mui-icon mui-icon-close fs_xi" style="position:absolute;top:0em;right:0em;font-style:normal;color:#f5ba26;" onclick="$(this).parent().remove();"></i>';
							div = document.createElement('span');
							div.innerHTML = result;
							document.getElementById("ddd").appendChild(div);
						}
					}
					reader.readAsDataURL(input.files[0]);
					return 1;
				}
			}
			//压缩图片函数
			function compress(img) {
				var initSize = img.src.length;
				var width = img.width;
				var height = img.height;
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext('2d');
				//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
				var ratio;
				if((ratio = width * height / 4000000) > 1) {
					ratio = Math.sqrt(ratio);
					width /= ratio;
					height /= ratio;
				} else {
					ratio = 1;
				}
				canvas.width = width;
				canvas.height = height;
				//铺底色
				ctx.fillStyle = "#fff";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(img, 0, 0, width, height);
				//进行最小压缩
				var ndata = canvas.toDataURL("image/jpeg",0.4);
				console.log(ndata.length)
				canvas.width = canvas.height = 0;
				return ndata;
			}
			$(function(){
				$(".tb_xt li").on('tap', function() {
  					var sur=$(this).find("a").attr("href");
  					mui.openWindow({
    					url: sur
  					});
				});
				$("#attention").on('tap',function(){
					var suppliers_id = {$suppliers_info.suppliers_id};
					$.ajax({
						type : 'post',
						url : "{:U('Mobile/Cellar/follow')}",
						data : {suppliers_id:suppliers_id},
						dataType : 'json',
						success : function(res){
							if(res.status == 1){
								$("#attention").html("已关注");
								location.reload();
							}else if(res.status==2){
								$("#attention").html("关注");
								location.reload();
							}else if(res.code == 0){
								window.location.href="{:U('Mobile/User/login')}";
							}else{	
								showErrorMsg(res.msg);
							}
						},
					});
				});
			})
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var page = 0;
			var pagecount = {$pagecount};
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++page >= pagecount)); //参数为true代表没有更多数据了。
					if(page < pagecount){
						getdiscuss(page);
					}
				}, 1500);
			}
			
			function getdiscuss(page){
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				var suppliers_id = {$suppliers_info.suppliers_id};
				$.ajax({
					type:"POST",
					url:"/Mobile/discuss/discuss_list",
					data:{"page":page,"id":suppliers_id},
					dataType:"json",
					async:false,//同步操作
					success:function(data){
						if(data.status == 1){
							$.each(data.data,function(i,discuss){
		 						var li = document.createElement('li');
		 	 					li.className = 'mui-table-view-cell';
		 	 					var ajaxhtml = '<div class="xt_top"><span><img src="'+discuss.head_pic+'" /></span><span class="fs_m">'+discuss.nickname+'</span>'+
		 									   '<span class="fs_s"><i class="fs_xs">'+discuss.addtime+'</i>'+
		 									   '<a href="/mobile/discuss/discuss_info/id/'+discuss.discuss_id+'" class="mui-icon mui-icon-chat fs_xl"><i class="fs_xs">'+discuss.reply+'</i></a></span></div>'+
		 									   '<div class="xt_m"><a href="/mobile/discuss/discuss_info/id/'+discuss.discuss_id+'"><p class="fs_m"><em class="fs_l">#'+discuss.title+'#</em>'+discuss.content+'</p>'+
		 									   '<p class="fs_m cls">';
		 									   if(discuss.img != null){
			 									   $.each(discuss.img,function(ii,discussimg){
			 										   ajaxhtml += ' <span><img src="'+discussimg+'" /></span>';
			 									   })
		 									   }
		 					    ajaxhtml += '</p></a></div>';
		 						li.innerHTML = ajaxhtml;
		 	 					table.appendChild(li);
							})
						}

					}
				});
			}
		</script>
		<script type="text/javascript">
			$(function() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if(isAndroid) {
					$("#doc").attr("accept","image/*");
					$("#doc").attr("capture","camera");
				}
				if(isIOS) {
					return false;
				}
			});
		</script>
	</body>

</html>